<?php
/**
 * The template used for displaying page content in page.php
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
<?php 
	global $post;
	$thePostID = $post->ID;
	$sonim_custom_info = get_post_custom($post->ID);
	$description_info = unserialize($sonim_custom_info['_sonim_metabox_description'][0]);
	$tech_info = unserialize($sonim_custom_info['_sonim_metabox_tech_info'][0]);
	$links = unserialize($sonim_custom_info['_sonim_metabox_links'][0]);
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="entry-content">
		<div class="sonim-product-image">
			<div class="col-left">
				<?php the_content(); ?>
			</div>
			<div class="col-right">
			<?php if(!empty($links)):?>
				<ul>
					<?php if(!empty($links['purcharse'])):?>
						<li><a href="<?php echo $links['purcharse']?>"><img src="<?php echo get_bloginfo('template_url').'/images/icon_buynow.png'?>"/></a></li>
					<?php endif;?>
					<?php if(!empty($links['download'])):?>
						<li><a href="<?php echo $links['download']?>"><img src="<?php echo get_bloginfo('template_url').'/images/icon_downloads.png'?>"/></a></li>
					<?php endif;?>
					<?php if(!empty($links['get_support'])):?>
						<li><a href="<?php echo $links['get_support']?>"><img src="<?php echo get_bloginfo('template_url').'/images/icon_support.png'?>"/></a></li>
					<?php endif;?>
					<?php if(!empty($links['purcharse_accessories'])):?>
						<li><a href="<?php echo $links['purcharse_accessories']?>"><img src="<?php echo get_bloginfo('template_url').'/images/icon_buynowAccessories.png'?>"/></a></li>
					<?php endif;?>
				</ul>
			<?php endif;?>
			</div>
		</div>
		<div style="clear:both"></div>
		<div class="sonim-description">
			<div>
				<div>
					<div class="info-tabs">
						<ul id="sonim-info-menu">
							<li class="active"><a href="#sonim-product-features">Features</a></li>
							<li><a href="#sonim-product-tech-specs">Tech Specs</a></li>
						</ul>
					</div>
					<div class="feature-detail">
						<img src="<?php echo get_bloginfo('template_url')?>/images/headers/label_rps.png"/>
						<img border="0" usemap="#rps" name="MyImage" src="<?php echo get_bloginfo('template_url')?>/images/headers/rps_strip.png">
						<div id="imageText"></div>
						<map name="rps" id="rps">

							<area onmouseout="removeText()" onmouseover="showText(1,'Extra-long battery life','Up to 18H talk time / 2 months standby')" href="" title="" alt="" coords="3,2,33,29" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(2,'Accessible Keypad','Designed for ease of use with gloved hands')" href="" title="" alt="" coords="35,1,62,29" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(3,'Extra-loud speaker','Capable of producing up to 110dB of noise')" href="" title="" alt="" coords="64,1,92,33" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(4,'Impervious to dust and micro-particles','Completely sealed to block microparticle entry')" href="" title="" alt="" coords="93,0,122,31" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(5,'Water submersible','In fresh/salt water at 3.5 feet (1 Meter) for 30 minutes')" href="" title="" alt="" coords="123,1,151,32" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(6,'Drop impact resistant','Tested from 6.5 feet (2 Meters) to concrete')" href="" title="" alt="" coords="153,1,179,32" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(7,'Shock/vibration resistant','Built to withstand impacts up to 4G')" href="" title="" alt="" coords="181,1,211,32" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(8,'Extreme temperature resiliency','Operates from -5 F (-20C)to +130F (+55C)')" href="" title="" alt="" coords="212,1,239,34" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(9,'Resistant to extreme pressure','Withstand up to 1 ton of pressure')" href="" title="" alt="" coords="241,3,270,33" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(10,'Puncture proof','Can withstand up to 5J of impact energy')" href="" title="" alt="" coords="271,3,300,31" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(11,'Resistant to petroleum oils &amp; other chemicals','Tested against 500+ chemicals')" href="" title="" alt="" coords="302,2,380,33" shape="rect"> 
							<area onmouseout="removeText()" onmouseover="showText(12,'3-year comprehensive warranty','Industry leading')" href="" title="" alt="" coords="333,1,380,31" shape="rect"> 

						</map>
						<script type="text/javascript">
						function showText(num,txt1,txt2) {
							if (typeof txt1 == "string") {
								document.getElementById('imageText').innerHTML = '<b>'+txt1+'</b><br />'+txt2;
								document.getElementById('imageText').style.marginLeft = (num*28)+'px';	
							}
							document.MyImage.src = '<?php echo get_bloginfo('template_url')?>/images/headers/rps_'+num+'.png';
						}
						function removeText() {
							document.getElementById('imageText').innerHTML = '';
							document.MyImage.src = '<?php echo get_bloginfo('template_url')?>/images/headers/rps_strip.png';
						}
						</script>
					</div>
				</div>
				<div style="clear:both"></div>
				<div class="col-left">
					<div id="sonim-product-features" class="sonim-description">
						<?php echo $description_info['features']?>
					</div>
					<div id="sonim-product-tech-specs" class="sonim-description">
						<?php echo $description_info['tech_specs']?>
					</div>
				</div>
				<div class="col-spliter"></div>
				<div class="col-right">
					<ul>
						<?php if(!empty($links['purcharse'])):?>
						<li><a href="<?php echo $links['datasheet']?>"><img src="<?php echo get_bloginfo('template_url').'/images/sideicon_datasheet_black.png'?>"/></a></li>
						<?php endif;?>
					</ul>
				</div>
			</div>
		<div></div>
		<?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?>
	</div><!-- .entry-content -->
	<footer class="entry-meta">
		<?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
	</footer><!-- .entry-meta -->
</article><!-- #post-<?php the_ID(); ?> -->
<script>
	jQuery(document).ready(function(){
		jQuery('#sonim-info-menu').tabify();
	})
</script>